<%include file="header.html"%> <%include file="top.html"%> <%include
file="left.html"%>
<div class="main-content">
<div class="breadcrumbs" id="breadcrumbs"><script
	type="text/javascript">
	try {
		ace.settings.check('breadcrumbs', 'fixed')
	} catch (e) {
	}
</script>

<ul class="breadcrumb">
	<li><i class="icon-home home-icon"></i> <a
		href="index.php">首页</a></li>
</ul>
<!-- .breadcrumb --></div>

<div class="page-content">

<div id="moveDevice" style="display:none" class="col-xs-12">
<div class="alert alert-info">
<form class="form-horizontal" role="form">
<div class="row">

<div class="col-sm-12">
<div class="row">
<label class="col-sm-5 control-label no-padding-right" for="form-field-5">游戏</label>
<div class="col-sm-3"><select id="selectGame2">
	<option value="" >游戏</option>
	<%if $selectGames%> <%foreach from = $selectGames key = key item = value%>
	<%if $nowGame == $value %>
	<option value="<%$value%>" selected><%$value%></option>
	<%else%>
	<option value="<%$value%>"><%$value%></option>
	<%/if%> <%/foreach%> <%/if%>
</select>
</div>
</div>
</div>

<div class="col-sm-12">
<div  class="row">
<label class="col-sm-5 control-label no-padding-right" for="form-field-5"></label>
</div>
</div>


<!-- 
<div class="col-sm-12">
<div class="row">
<label class="col-sm-5 control-label no-padding-right" for="form-field-5">渠道</label>
<div class="col-sm-3">
<select id="channel2">
	<option value="" id="selectChannel2">渠道</option>
	<%if $channels%> <%foreach from = $channels key = key item = value%>
	<%if $channel == $value %>
	<option value="<%$value%>" selected><%$value%></option>
	<%else%>
	<option value="<%$value%>"><%$value%></option>
	<%/if%> <%/foreach%> <%/if%>
</select>
</div>
</div>
</div>
<div class="col-sm-12">
<div  class="row">
<label class="col-sm-5 control-label no-padding-right" for="form-field-5"></label>
</div>
</div>



<div class="col-sm-12">
<div class="row">
<label class="col-sm-5 control-label no-padding-right" for="form-field-5">平台</label>
<div class="col-sm-3">
<select id="platform2">
	<option value="" id="selectPlatform2">平台</option>
	<%if $platforms%> <%foreach from = $platforms key = key item = value%>
	<%if $platform == $value %>
	<option value="<%$value%>" selected><%$value%></option>
	<%else%>
	<option value="<%$value%>"><%$value%></option>
	<%/if%> <%/foreach%> <%/if%>
</select>
</div>
</div>
</div>

<div class="col-sm-12">
<div  class="row">
<label class="col-sm-5 control-label no-padding-right" for="form-field-5"></label>
</div>
</div>
 
<div class="col-sm-12">
<div class="row"><label
	class="col-sm-5 control-label no-padding-right" for="form-field-5">开始</label>
<div class="col-sm-3">
<div class="input-group"><span class="input-group-addon"> <i
	class="icon-calendar bigger-110"></i> </span> <input
	class="date-picker col-xs-12 col-sm-12" id="startTime2"
	value="<%$startDate%>" type="text" data-date-format="yyyy-mm-dd" /></div>
</div>
</div>
</div>

<div class="col-sm-12">
<div  class="row">
<label class="col-sm-5 control-label no-padding-right" for="form-field-5"></label>
</div>
</div>

<div class="col-sm-12">
<div class="row"><label
	class="col-sm-5 control-label no-padding-right" for="form-field-5">结束</label>
<div class="col-sm-3">
<div class="input-group"><span class="input-group-addon"> <i
	class="icon-calendar bigger-110"></i> </span> <input
	class="date-picker col-xs-12 col-sm-12" id="endTime2"
	value="<%$endDate%>" type="text" data-date-format="yyyy-mm-dd" /></div>
</div>
</div>
</div>
-->
<div class="col-sm-12">
<div  class="row">
<label class="col-sm-5 control-label no-padding-right" for="form-field-5"></label>
</div>
</div>

<div class="col-sm-12">
<div class="row"><label
	class="col-sm-5 control-label no-padding-right" for="form-field-5">&nbsp;&nbsp;&nbsp;&nbsp;</label>
<div class="col-sm-2">
<center>
<button type="button" onClick="formSubmit('select', 'move');"
	class="width-50 btn btn-sm btn-primary">查询</button>
</center>
</div>
</div>
</div>



</div>
</form>
</div>
</div>

<div id="pcDevice" style="display:block" class="col-xs-12">
<div class="alert alert-info">
<form class="form-horizontal" role="form">
<div class="row">

<div class="col-sm-2">
<div class="row">
<label class="col-sm-4 control-label no-padding-right" for="form-field-5">游戏</label>
<div class="col-sm-6"><select id="selectGame">
	<option value="" >游戏</option>
	<%if $selectGames%> <%foreach from = $selectGames key = key item = value%>
	<%if $nowGame == $value %>
	<option value="<%$value%>" selected><%$value%></option>
	<%else%>
	<option value="<%$value%>"><%$value%></option>
	<%/if%> <%/foreach%> <%/if%>
</select>
</div>
</div>
</div>


<div class="col-sm-2">
<div class="row">
<label class="col-sm-4 control-label no-padding-right" for="form-field-5">平台</label>
<div class="col-sm-6">
<select id="platform">
	<option value="" >平台</option>
	<%if $platforms%> <%foreach from = $platforms key = key item = value%>
	<%if $platform == $value %>
	<option value="<%$value%>" selected><%$value%></option>
	<%else%>
	<option value="<%$value%>"><%$value%></option>
	<%/if%> <%/foreach%> <%/if%>
</select>
</div>
</div>
</div>

<div class="col-sm-2">
<div class="row">
<label class="col-sm-4 control-label no-padding-right" for="form-field-5">区服</label>
<div class="col-sm-6">
<!--<select id="selectServer">
	<option value="" id="server">区服</option>
	
	<%if $pageNameArr%> <%foreach from = $pageNameArr key = key item = value%>
	<%if $nowServer == $value %>
	<option value="<%$value%>" selected><%$value%></option>
	<%else%>
	<option value="<%$value%>"><%$value%></option>
	<%/if%> <%/foreach%> <%/if%>
	
</select>-->
	<select  id="server">
		<option value="" id="selectServer">区服</option>
		<%if $servers%> <%foreach from = $servers key = key item = value%>
		<%if $server == $key %>
		<option value="<%$key%>" selected><%$key%></option>
		<%else%>
		<option value="<%$key%>"><%$key%></option>
		<%/if%> <%/foreach%> <%/if%>
	</select>
</div>
</div>
</div>

<!-- 
<div class="col-sm-2">
<div class="row">
<label class="col-sm-2 control-label no-padding-right" for="form-field-5">渠道</label>
<div class="col-sm-3">
<select id="channel">
	<option value="" id="selectChannel">渠道</option>
	<%if $channels%> <%foreach from = $channels key = key item = value%>
	<%if $channel == $value %>
	<option value="<%$value%>" selected><%$value%></option>
	<%else%>
	<option value="<%$value%>"><%$value%></option>
	<%/if%> <%/foreach%> <%/if%>
</select>
</div>

</div>
</div>

<div class="col-sm-2">
<div class="row"><label
	class="col-sm-2 control-label no-padding-right" for="form-field-5">开始</label>
<div class="col-sm-9">
<div class="input-group"><span class="input-group-addon"> <i
	class="icon-calendar bigger-110"></i> </span> <input
	class="date-picker col-xs-12 col-sm-12" id="startTime"
	value="<%$startDate%>" type="text" data-date-format="yyyy-mm-dd" /></div>
</div>
</div>
</div>

<div class="col-sm-2">
<div class="row"><label
	class="col-sm-2 control-label no-padding-right" for="form-field-5">结束</label>
<div class="col-sm-9">
<div class="input-group"><span class="input-group-addon"> <i
	class="icon-calendar bigger-110"></i> </span> <input
	class="date-picker col-xs-12 col-sm-12" id="endTime"
	value="<%$endDate%>" type="text" data-date-format="yyyy-mm-dd" /></div>
</div>
</div>
</div>
-->

<div class="col-sm-3">
<div class="row">
<label class="col-sm-3 control-label no-padding-right" for="form-field-5"></label>
<div class="col-sm-9">
<center>
<button type="button" onClick="formSubmit('select', 'pc');"
	class="width-50 btn btn-sm btn-primary">查询</button>
</center>
</div>
</div>
</div>

</div>
</form>
</div>
</div>



<div class="col-xs-12">
<div class="table-header">

<button type="button" 
	class="width-10 btn btn-sm btn-primary">等级分布
</button>


<%if $costTime %>
<span>
	让您久等了,本次查询共耗时间<%$costTime%>s
</span>
<%else if%>
	因数据量较大,建议分平台查询,请耐心等待...

<%/if%>


<button type="button" style="float:right"  onClick="formSubmit('daochu', 'pc');"
	class="width-10 btn btn-sm btn-primary">导出excel
</button>

</div>

<%if $viewData%>


<div class="row">					
	<div class="col-sm-12">
		<div class="widget-box transparent">
			<div class="widget-body">
				<div class="position-relative">
							<div id="container" style="min-width:400px;height:300px"></div>
				</div><!-- /position-relative -->
			</div><!-- /widget-body -->
		</div><!-- /widget-box -->
	</div>					
	 					
</div><!-- /row -->
<%/if%>

<div id="view"  class="table-responsive">
<table id="sample-table-4"
	class="table table-striped table-bordered table-hover">
	<thead>
			<th>所在服</th>
			<th>L1-5</th>
			<th>L6-10</th>
			<th>L11-15</th>
			<th>L16-20</th>
			<th>L21-25</th>
			<th>L26-30</th>
			<th>L31-35</th>
			<th>L36-40</th>
			<th>L41-45</th>
			<th>L46-50</th>
			<th>L51-55</th>
			<th>L56-60</th>
			<th>L61-65</th>
			<th>L66-70</th>
			<th>L71-75</th>
			<th>L76-80</th>
			<th>L81-85</th>
			<th>L86-90</th>
			<th>L91-95</th>
			<th>L96-100</th>
		</tr>
	<thead>
	<thead>
	<tbody>

		<tr>
			<td><%$data.server%></td>
			<td><%$data.L1%></td>
			<td><%$data.L2%></td>
			<td><%$data.L3%></td>
			<td><%$data.L4%></td>
			<td><%$data.L5%></td>
			<td><%$data.L6%></td>
			<td><%$data.L7%></td>
			<td><%$data.L8%></td>
			<td><%$data.L9%></td>
			<td><%$data.L10%></td>
			<td><%$data.L11%></td>
			<td><%$data.L12%></td>
			<td><%$data.L13%></td>
			<td><%$data.L14%></td>
			<td><%$data.L15%></td>
			<td><%$data.L16%></td>
			<td><%$data.L17%></td>
			<td><%$data.L18%></td>
			<td><%$data.L19%></td>
			<td><%$data.L20%></td>
		</tr>


	</tbody>
</table>
</div>

<!-- /.table-responsive --></div>
</div>
<!-- /.page-content --></div>
<!-- /.main-content -->
<script type="text/javascript">


	jQuery(function($) {
		$('.date-picker').datepicker({
			autoclose : true
		}).next().on(ace.click_event, function() {
			$(this).prev().focus();
		});

		var oTable1 = $('#sample-table-4').dataTable({
			"aoColumns" : [
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
				{"bSortable" : false},
			]
		});
	});

	
	function formSubmit(type, device) {
		if(device == "pc") {
			var game = $('#selectGame').val();
			 var platform = $('#platform').val();
            var server = $('#server').val();
			/*var channel = $('#channel').val(); */
		} else if(device == "move") {
			var game = $('#selectGame2').val();
			var platform = $('#platform2').val();
            var server = $('#server2').val();
			/*  var channel = $('#channel2').val(); */
		}
		if (!game) {
			alert('请选择游戏！');
		} else if (!platform) {
			alert('请选择游戏！');
		} else if (!server) {
			alert('请选择服！');
		} else {
			url = "index.php?mod=DataAnalysis&do=getLevelNum&game="
				+ game
				+ "&platform="
				+ platform
				+ "&server="
				+ server
				+ "&type="
				+ type
				+ "&action=1";
			window.location.href = url;
		}
	}
	
	
	window.onload = function(){
		
		/*		var width = document.documentElement.clientWidth;
		if(width < 1700) {
			$('#pcDevice').css("display", "none");
			$('#moveDevice').css("display", "block");
		} else if(width > 1700) {
			$('#pcDevice').css("display", "block");
			$('#moveDevice').css("display", "none");
		}
		*/
		
 		// pc设备
	    var select = document.getElementById('selectGame');
	    select.onchange = function(){
	    	
	        // 更改值后执行的代码
	       var gameName = jQuery("#selectGame  option:selected").text();
	       var _tagNum = 1;
	       $.ajax({
	    	    type: "POST",
				url: "index.php?mod=Game&do=getPlatformByGame&game=" + gameName,
				data: "",
				dataType: 'html',
				success: function(data) {					
					var dataObj = eval("(" + data + ")");//转换为json对象
					
					if(dataObj == null) {
						$("#platform").empty();
						$("#platform").append('<option value="" id="selectPlatform">平台</option>');
						$("#channel").empty();
						$("#channel").append('<option value="" id="selectChannel">渠道</option>');
					}
					
					var platform = dataObj.platform;
					$("#platform").empty();
					$("#platform").append('<option value="" id="selectPlatform">平台</option>');
					for(var i=0;i<platform.length;i++){
						$("#platform").append("<option value='"+platform[i]+"' >"+platform[i]+"</option>"+"<br/>");
					}
					
					var channel = dataObj.channel;
					$("#channel").empty();
					$("#channel").append('<option value="" id="selectChannel">渠道</option>');
					for(var i=0;i<channel.length;i++){
						$("#channel").append("<option value='"+channel[i]+"' >"+channel[i]+"</option>"+"<br/>");
					}
				}
	       });
            //填充区服
            $.ajax({
                type: "POST",
                url: "index.php?mod=Gm&do=getServerListByGameAjax&game=" + gameName,
                data: "",
                dataType: 'html',
                success: function(data) {
                    var dataObj = eval("(" + data + ")");//转换为json对象

                    if(dataObj == null) {
                        $("#server").empty();
                        $("#server").append('<option value="" id="selectServer">区服</option>');
                    }

                    var server = dataObj;
                    $("#server").empty();
                    $("#server").append('<option value="" id="selectServer">区服</option>');

                    for (var Key in server){
                        $("#server").append("<option value='"+Key+"' >"+Key+"</option>"+"<br/>");
                    }
                }
            });
	    }

	    

	    // 移动设备
	    var select2 = document.getElementById('selectGame2');
	    select2.onchange = function(){
	        // 更改值后执行的代码
	       var gameName = jQuery("#selectGame2  option:selected").text();
	       $.ajax({
	    	    type: "POST",
				url: "index.php?mod=Game&do=getPlatformByGame&game=" + gameName,
				data: "",
				dataType: 'html',
				success: function(data) {					
					var dataObj = eval("(" + data + ")");//转换为json对象
					if(dataObj == null) {
						$("#platform2").empty();
						$("#platform2").append('<option value="" id="selectPlatform2">平台</option>');
						$("#channel2").empty();
						$("#channel2").append('<option value="" id="selectChannel2">渠道</option>');
					}
					
					var platform = dataObj.platform;
					$("#platform2").empty();
					$("#platform2").append('<option value="" id="selectPlatform2">平台</option>');
					for(var i=0;i<platform.length;i++){
						$("#platform2").append("<option value='"+platform[i]+"' >"+platform[i]+"</option>"+"<br/>");
					}
					
					var channel = dataObj.channel;
					$("#channel2").empty();
					$("#channel2").append('<option value="" id="selectChannel2">渠道</option>');
					for(var i=0;i<channel.length;i++){
						$("#channel2").append("<option value='"+channel[i]+"' >"+channel[i]+"</option>"+"<br/>");
					}
				}
	       });
            //填充区服
            $.ajax({
                type: "POST",
                url: "index.php?mod=Gm&do=getServerListByGameAjax&game=" + gameName,
                data: "",
                dataType: 'html',
                success: function(data) {
                    var dataObj = eval("(" + data + ")");//转换为json对象

                    if(dataObj == null) {
                        $("#server").empty();
                        $("#server").append('<option value="" id="selectServer">区服</option>');
                    }

                    var server = dataObj;
                    $("#server").empty();
                    $("#server").append('<option value="" id="selectServer">区服</option>');

                    for (var Key in server){
                        $("#server").append("<option value='"+Key+"' >"+Key+"</option>"+"<br/>");
                    }
                }
            });
	    }

	} 
	
	
	<%if $viewData%>
	// 饼状图
	$(function () {
	    $('#container').highcharts({
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false
	        },
	        title: {
	            text: '等级分布饼状图'
	        },
	        tooltip: {
	    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: true,
	                    color: '#000000',
	                    connectorColor: '#000000',
	                    format: '<b>{point.name}</b>: {point.percentage:.2f} %'
	                }
	            }
	        },
	        series: [{
	            type: 'pie',
	            name: 'Browser share',
	            data: <%$viewData%>
	        /*    data: [
	                ['Firefox',   50.00],
	                ['IE',       26.8],
	                ['Chrome',    12.8],
	                ['Safari',    8.5],
	                ['Opera',     6.2],
	                ['Others',   50.00]
	            ]
	       */
	        }]
	    });
	});	
	<%/if%>
</script>
<%include file="footer.html"%>

